import Taro, {Component, Config} from '@tarojs/taro'
import { View } from '@tarojs/components'
import { EmptyData, Loading, LoadMore, TabBar } from '@/components/index'
import './index.scss'
import { showEmpty } from "@/utils/utils"
import { APP_NAME, APP_SYSTEM_INFO } from "@/config/config"
import { getRecommendPage } from '@/api/commentApi'
import { getSharePath } from "@/utils/storage"
import CommentItem from '@/components/comment/comment-item/index'

// const tabBarHeight = getGlobalData('tabBarHeight')
export default class Index extends Component {
  state: any
  config: Config = {
    backgroundColor: process.env.backgroundColor,
    backgroundTextStyle: "dark",
    enablePullDownRefresh: true,
    navigationBarTitleText: '口碑好评',
    navigationBarTextStyle: process.env.navigationBarTextStyle,
    navigationBarBackgroundColor: process.env.backgroundColor
  }

  constructor() {
    super(...arguments)
    this.state = {
      page: 1,
      limit: 10,
      loading: true,
      dataList: [],
      goodsList: [],
      loadStatus: 'loading',
    }
  }

  componentWillMount() {
    this.getPage()
  }

  //  分享小程序
  onShareAppMessage() {
    return { title: APP_NAME, path: getSharePath() }
  }

  onPullDownRefresh() {
    this.setState({
      page: 1,
      limit: 10,
      loadStatus: 'loading',
    }, () => {
      this.getPage()
    })
  }

  onReachBottom() {
    this.getPage()
  }

  //  分页获取评论
  getPage() {
    const { page, limit, dataList, loadStatus } = this.state
    if(loadStatus === 'noMore') {
      return
    }

    getRecommendPage({ page, limit }).then(res => {
      const { list, totalCount } = res.data
      this.setState({
        page: page+1,
        dataList: page === 1 ? list : dataList.concat(list),
        loadStatus: (page * limit >= totalCount) ? 'noMore' : 'loading',
      }, () => {
        Taro.stopPullDownRefresh()
        this.setState({
          loading: false,
        })
      })
    })
  }

  render() {
    const { dataList, loadStatus, loading } = this.state

    return (<View className='comment-page'>
      {loading && <Loading/>}
      <View className='comment-list'>
        {dataList.map(item => {
          return (<View key={item.id} className='comment-box'>
            <CommentItem key={item.id} info={item} showGoods/>
          </View>)
        })}
      </View>
      {!showEmpty(dataList, loadStatus) && <LoadMore status={loadStatus}/>}
      {showEmpty(dataList, loadStatus) && <View className='list-empty'><EmptyData/></View>}

      <View style={{height: `${APP_SYSTEM_INFO.tabBarHeight}px`}}/>
      <TabBar />
    </View>)
  }
}
